<template>
  <div class="box">
    <img class='bg' src="../../assets/img/login/zsBg.png" alt="">
    <div class="con">
      <div class="content">
        <div class="title flex vc">
          <div class="line"></div>
          证书记录
        </div>
        <div class="ul">
          <div class='noList' v-if='list.length==0'>
            <img src="../../assets/img/login/noList.png" alt="">
            <p>暂无记录</p>
          </div>
          <div v-else class='flex vc ha newline'>
            <router-link :to='{path: "/certificate", query: {certificate: item.certificate, createDate: item.createDate.substring(0,10) }}' class="li" v-for='item in list' :key="item.id">
              <img src="../../assets/img/login/tu.png" alt="">
              <p>{{item.createDate.substring(0,10)}} </p>
            </router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { userDonateLogList } from '@/api/donate'
export default {
  data () {
    return {
      list: [],
      page: 0
    }
  },

  created () {
    userDonateLogList({ page: this.page }).then(response => {
      this.list = response.data.list
    })
  },

  methods: {}
}
</script>

<style scoped="scoped">
  .box {
    font-size: 15px;
    color: #434343;
    position: relative;
  }

  .flex {
    width: auto;
  }

  .bg {
    width: 100%;
  }

  .con {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    padding: 160px 15px 0;
  }

  .content {
    width: 100%;
    height: calc(100vh - 160px);
    background: #fff;
    border-radius: 10px;
    padding: 20px;
  }

  .line {
    width: 2px;
    height: 13px;
    background: #772525;
    margin-right: 10px;
  }

  .ul {
    width: 100%;
    height: calc(100% - 20px);
    overflow-y: scroll;
  }

  .noList img {
    display: block;
    width: 158px;
    margin: 100px auto 0;
  }

  .noList p {
    color: #C0C0C2;
    font-size: 15px;
    margin-top: 20px;
    text-align: center;
  }

  .li {
    margin: 25px 0 10px;
    display: block;
  }

  .li img {
    width: 121px;
  }

  .li p {
    font-size: 13px;
    margin-top: 10px;
    text-align: center;
  }
</style>
